<template>
  <div class="toolbar colorMain">
    <div class="mt-10 mb-10">
      <div class="mt-10 mb-10">
        <line-from-choose @change="change"/>
      </div>
    </div>
    <p style="text-align: center;font-size: 16px;margin-bottom:0;background: #fff; line-height:36px;border:1px solid #ebeef5; border-bottom:none;">活跃与付费</p>
    <analyse-online-table :table-data="tableData" :key_mapper="key_mapper" :sortable = "['user_id', 'chn']" :min-width = "160" size="small" @sort-change="sortChange"/>
    <el-row :gutter="24" class="m-10" >
      <el-col :span="12" class="block">
        <ve-line :data="chartData.chartData1" :colors="ChartColors" :settings="chartData.chartSetting1"/>
      </el-col>
      <el-col :span="12" class="block">
        <ve-histogram :data="chartData.chartData2" :colors="ChartColors" :settings="chartData.chartSetting1"/>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="m-10" >
      <el-col :span="12" class="block">
        <ve-line :data="chartData.chartData3" :colors="ChartColors" :extend="chartExtend"/>
      </el-col>
      <el-col :span="12" class="block">
        <ve-line :data="chartData.chartData4"/>
      </el-col>
    </el-row>
    <!--<div><el-button :loading="excelLoad" icon="el-icon-printer" style="float: right;margin: 0 0 10px 0" size="mini" type="success" @click="downExcel" >导出数据</el-button></div>-->
    <p style="text-align: center;font-size: 16px;margin-bottom:0;background: #fff; line-height:36px;border:1px solid #ebeef5; border-bottom:none;">新用户</p>
    <analyse-online-table :table-data="tableData2" :key_mapper="key_mapper2" :sortable = "['user_id', 'chn']" :min-width = "160" size="small" @sort-change="sortChange"/>
    <el-row :gutter="24" class="m-10" >
      <el-col :span="12" class="block">
        <ve-line :data="chartData2.chartData1" :colors="ChartColors" :settings="chartData2.chartSetting1"/>
      </el-col>
      <el-col :span="12" class="block">
        <ve-histogram :data="chartData2.chartData2" :colors="ChartColors" :settings="chartData2.chartSetting2"/>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="m-10" >
      <el-col :span="12" class="block">
        <ve-line :data="chartData2.chartData3" :colors="ChartColors" :extend="chartExtend"/>
      </el-col>
      <el-col :span="12" class="block">
        <ve-line :data="chartData2.chartData4"/>
      </el-col>
    </el-row>
    <p style="text-align: center;font-size: 16px;margin-bottom:0;background: #fff; line-height:36px;border:1px solid #ebeef5; border-bottom:none;">新用户留存与LTV</p>
    <analyse-online-table :table-data="tableData3" :key_mapper="key_mapper3" :sortable = "['user_id', 'chn']" :min-width = "160" size="small" @sort-change="sortChange"/>
    <el-row :gutter="24" class="m-10" >
      <el-col :span="12" class="block">
        <ve-line :data="chartData3.chartData1" :colors="ChartColors" />
      </el-col>
      <el-col :span="12" class="block">
        <ve-line :data="chartData3.chartData2"/>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { today,yesterday } from '@/model/DateRange'
import { UserAnalysis } from '@/api/table'
import mixins from '@/model/mixins'
import mixinsFrom from '@/model/mixinsFrom'
// import { fixed3 } from '@/utils'
// import { sendForm } from '@/utils/'
export default {
  name: 'Play',
  mixins: [mixins, mixinsFrom],
  data() {
    return {
      tableData: [],
      key_mapper: [],
      chartData: {
        chartSetting1: {
          axisSite: { right: ['recharge_margin'] },
          showLine: ['recharge_margin']
        },
        chartData1: {
          columns: ['day', 'active_user', 'bet_user'],
          rows: []
        },
        chartData2: {
          columns: ['day', 'recharge_user', 'recharge_margin'],
          rows: []
        },
        chartData3: {
          columns: ['day', 'arpu'],
          rows: []
        },
        chartData4: {
          columns: ['day', 'arppu'],
          rows: []
        }
      },
      chartData2: {
        chartSetting1: {
          axisSite: { right: ['new_recharge_margin'] },
          showLine: ['new_recharge_margin']
        },
        chartSetting2: {
          axisSite: { right: ['new_bind_margin'] },
          showLine: ['new_bind_margin']
        },
        chartData1: {
          columns: ['day', 'register_user', 'new_bet_user'],
          rows: []
        },
        chartData2: {
          columns: ['day', 'new_bind_user', 'new_bind_margin'],
          rows: []
        },
        chartData3: {
          columns: ['day', 'new_arpu'],
          rows: []
        },
        chartData4: {
          columns: ['day', 'new_arppu'],
          rows: []
        }
      },
      chartData3: {
        chartSetting1: {
          axisSite: {},
          showLine: []
        },
        chartData1: {
          columns: ['day', 'stay_2_user', 'stay_3_user', 'stay_7_user'],
          rows: []
        },
        chartData2: {
          columns: ['day', 'ltv7', 'ltv14', 'ltv30'],
          rows: []
        }
      },
      queryFrom: {
        report_type: 'base',
        interval_type: 'day',
        target_time: yesterday
      },
      tableData2: [],
      key_mapper2: [],
      tableData3: [],
      key_mapper3: [],
      API: UserAnalysis
    }
  },
  watch: {
    tableData() {
      const chartFrom = this.tableData.slice(0, this.tableData.length - 2)
      this.chartData.chartData1.rows = chartFrom
      this.chartData.chartData2.rows = chartFrom
      this.chartData.chartData3.rows = chartFrom
      this.chartData.chartData4.rows = chartFrom
      this.chartData = this.pie(this.chartData, this.key_mapper)
    },
    tableData2() {
      console.log(this.tableData2)
      const chartFrom = this.tableData2.slice(0, this.tableData2.length - 2)
      this.chartData2.chartData1.rows = chartFrom
      this.chartData2.chartData2.rows = chartFrom
      this.chartData2.chartData3.rows = chartFrom
      this.chartData2.chartData4.rows = chartFrom
      // debugger
      this.chartData2 = this.pie(this.chartData2, this.key_mapper2)
      console.log(this.chartData2)
    },
    tableData3() {
      const chartFrom = this.tableData3.slice(0, this.tableData3.length - 2)
      this.chartData3.chartData1.rows = chartFrom
      this.chartData3.chartData2.rows = chartFrom
      this.chartData = this.pie(this.chartData, this.key_mapper)
    }
  },
  created() {
    this.sendBoth()
  },
  methods: {
    sendBoth() {
      this.getData(Object.assign({}, this.queryFrom, { report_type: 'base' }), this.API, 'key_mapper', 'tableData')
      this.getData(Object.assign({}, this.queryFrom, { report_type: 'new' }), this.API, 'key_mapper2', 'tableData2')
      this.getData(Object.assign({}, this.queryFrom, { report_type: 'stay' }), this.API, 'key_mapper3', 'tableData3')
    },
    change(data) {
      Object.assign(this.queryFrom, data)
      this.sendBoth()
    }
  }
}
</script>
